<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="xm" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="nl" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="xb">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="add">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in arr" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="del(index)">删除</button>
            <button @click="bj(index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  methods:{
    del(index){
       this.arr.splice(index,1)
    },
    bj(index){
       this.xm=this.arr[index].name;
       this.nl=this.arr[index].age;
       this.xb=this.arr[index].gender
       this.flag=true
       this.id=index
    },
    add(){
      if(this.xm===''||this.xb===''||this.nl===''){
         alert('数据不能为空')
      }else if(this.flag){
        this.arr[this.id].name=this.xm
        this.arr[this.id].age=this.nl
        this.arr[this.id].gender=this.xb
        this.flag=false
        this.xm=''
        this.nl=''
        this.xb=''
      }
      else{
        this.arr.push({name:this.xm,age:this.nl,gender:this.xb})
        this.xm=''
        this.nl=''
        this.xb=''
      }
    }
  },
   data(){
    return {
      id:'0',
      flag:false,
      xm:'',
      nl:'',
      xb:'',
      arr:[
        {name:'Tom',age:19,gender:'男'},
        {name:'Jone',age:21,gender:'女'},
        {name:'小李',age:18,gender:'男'},
      ]
    }
   },
}
</script>